<template>
    <div>
        <section class="content-header clearfix">
            统计分析<span>&nbsp;&nbsp;>&nbsp;&nbsp;</span>及时率统计
        </section>
        <section class="content-main clearfix">
            <div class="col-sm-4 clearfix">
                <label class="col-sm-3 control-label">创建时间：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker1" @mousedown="selectDate1" placeholder="YYYY-MM-DD" v-model="timelinessRateOut.eventTimeStart">
                    </div>
                </div>
                <div class="col-sm-1" style="height:34px;line-height:34px">--
                    
                </div>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input type="text" class="form-control pull-right" id="datepicker2" @mousedown="selectDate2" placeholder="YYYY-MM-DD" v-model="timelinessRateOut.eventTimeEnd">
                    </div>
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-2 col-sm-offset-1">
                    <button type="button" class="btn btn-primary" @click="select">查询</button>
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-4">
                    <router-link to="overtime">
                        <button type="button" class="btn btn-primary">查看超时工单</button>
                    </router-link>
                </div>
                <div class="col-sm-2 col-sm-offset-6">
                    <button type="button" class="btn btn-primary" @click="timelinessOut">导出</button>
                </div>
            </div>
        </section>
        <section class="clearfix">
            <div class="clearfix">
                <div class="col-sm-6 col-sm-offset-3" style="padding:20px 15px">
                    <table class="table-hover" border="1" style="font-size:18px">
                        <thead>
                            <tr class="title">
                                <th style="width:16%;">处理部门</th>
                                <th style="width:14%;">工单</th>
                                <th style="width:14%;">及时工单</th>
                                <th style="width:14%;">超时工单</th>
                                <th style="width:14%;">及时率</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,key,index) in timelinessRateData" :key="index">
                                <td>
                                    {{item.eventDepName}}
                                </td>
                                <td>
                                    {{item.eventNum}}
                                </td>
                                <td>
                                    {{item.timelyNum}}
                                </td>
                                <td>
                                    {{item.overtimeNum}}
                                </td>
                                <td>
                                    {{item.timelinessRate}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
        <section class="clearfix">
            <div class="col-sm-6 clearfix">
                <div id="echartContainer1" style="width:100%; height:300px;"></div>
            </div>
            <div class="col-sm-6 clearfix">
                <div id="echartContainer2" style="width:100%; height:300px;"></div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils";

export default {
    data() {
        return {
            timelinessRateData: [],
            timelyNumData: [],
            overtimeNumData: [],
            timeRateData: [],
            name: [],
            timelinessRateOut: {
                eventTimeStart: utils.nowDate(-7),
                eventTimeEnd: utils.nowDate(0)
            }
        };
    },
    mounted() {
        this.select()
    },
    methods: {
        selectDate1() {
            $("#datepicker1").datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
            .on("changeDate", ev => {
                    this.timelinessRateOut.eventTimeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2").datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
            .on("changeDate", ev => {
                    this.timelinessRateOut.eventTimeEnd = ev.target.value;
                });
        },
        getTimelinessRate(callback) {
            this.$api.tongji.home.timelinessRate(this.timelinessRateOut).then(res => {
                if (res.success) {
                    // console.log(res);
                    this.timelinessRateData = res.data;
                    callback();
                }
            });
        },
        getTimelyNumData() {
            this.timelyNumData=[]
            for (let item in this.timelinessRateData) {
                // console.log(this.timelinessRateData[item].timelyNum);
                this.timelyNumData.push(
                    this.timelinessRateData[item].timelyNum
                );
            }
        },
        getOvertimeNumData() {
            this.overtimeNumData=[]
            for (let item in this.timelinessRateData) {
                // console.log(this.timelinessRateData[item].overtimeNum);
                this.overtimeNumData.push(
                    this.timelinessRateData[item].overtimeNum
                );
            }
        },
        getTimelinessRateData() {
            this.timeRateData=[]
            console.log(this.timelinessRateData)
            for (let item in this.timelinessRateData) {
                // console.log(this.timelinessRateData[item].timelinessRate);
                this.timeRateData.push(
                    this.timelinessRateData[item].timelinessRate
                        .toString()
                        .replace(/%/g, "")
                );
                // console.log(this.timelinessRateData[item])
            }
        },
        getTimeName() {
            this.name=[]
            for (let item in this.timelinessRateData) {
                this.name.push(this.timelinessRateData[item].eventDepName);
                // console.log(this.timelinessRateData[item].eventDepName)
            }
        },
        timelinessOut() {
            console.log(this.timelinessRateOut);
            this.$api.tongji.home
                .timelinessRateOut(this.timelinessRateOut)
                .then(res => {
                    if (res.success) {
                        console.log(res);
                    }
                });
        },
        select(){
var echarts = require("echarts");
        var myChart1 = echarts.init(
            document.getElementById("echartContainer1")
        );
        var myChart2 = echarts.init(
            document.getElementById("echartContainer2")
        );
        this.getTimelinessRate(() => {
            this.getTimeName();
            this.getTimelyNumData();
            this.getOvertimeNumData();
            this.getTimelinessRateData();
            myChart1.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    data: ["及时工单", "超时工单"]
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "value"
                },
                yAxis: {
                    type: "category",
                    data: this.name
                },
                series: [
                    {
                        name: "及时工单",
                        type: "bar",
                        stack: "总量",
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#5b9bd5"
                            }
                        },
                        data: this.timelyNumData
                    },
                    {
                        name: "超时工单",
                        type: "bar",
                        stack: "总量",
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#a5a5a5"
                            }
                        },
                        data: this.overtimeNumData
                    }
                ]
            });

            myChart2.setOption({
                title: {
                    text: "及时率",
                    x: "center"
                },
                color: ["#2098DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    },
                    formatter: "{c}%"
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.name,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            formatter: function(value) {
                                return value.split("").join("\n");
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        max: 120,
                        interval: 20,
                        axisLabel: {
                            formatter: "{value} %"
                        }
                    }
                ],
                series: [
                    {
                        name: "直接访问",
                        type: "bar",
                        barWidth: "100%",
                        data: this.timeRateData,
                        label: {
                            show: true,
                            formatter: "{c}%" //这是关键，在需要的地方加上就行了
                        },
                        itemStyle: {
                            normal: {
                                color: "#3c8dbc"
                            }
                        }
                    }
                ]
            });
        });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
    label,
    input,
    select,
    button {
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
    }
    select,
    button {
        padding: 0px;
    }
    .col-sm-4,
    .col-sm-3,
    .col-sm-1,
    .col-sm-6,
    .col-sm-8 {
        padding: 0;
        text-align: center;
    }
}
</style>
